<template>
  <view class="right_bottom_wrap">
    <seamless-scroll
      :list="state.list"
      v-model="state.scroll"
      :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step"
      :limitScrollNum="state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover"
      :singleWaitTime="state.defaultOption.singleWaitTime"
    >
      <view class="right_bottom">
        <view class="right_center_item" v-for="(item, i) in state.list" :key="i">
          <text class="orderNum">{{ i + 1 }}</text>
          <view class="inner_right">
            <view class="dibu"></view>
            <view class="flex">
              <view class="info">
                <text class="labels">设备ID：</text>
                <text class="text-content zhuyao">{{ item.gatewayno }}</text>
              </view>
              <view class="info">
                <text class="labels">型号：</text>
                <text class="text-content">{{ item.terminalno }}</text>
              </view>
              <view class="info">
                <text class="labels">告警值：</text>
                <text class="text-content warning">{{ montionFilter(item.alertvalue) }}</text>
              </view>
            </view>

            <view class="flex">
              <view class="info">
                <text class="labels">地址：</text>
                <text class="ciyao address-text">{{ handleAddress(item) }}</text>
              </view>
              <view class="info time">
                <text class="labels">时间：</text>
                <text class="text-content time-text">{{ item.createtime }}</text>
              </view>
            </view>
            
            <view class="flex">
              <view class="info">
                <text class="labels">报警内容：</text>
                <text class="text-content ciyao" :class="{ warning: item.alertdetail }">
                  {{ item.alertdetail || '无' }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </seamless-scroll>
  </view>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingStore } from '@/stores/index'
import SeamlessScroll from '@/components/seamless-scroll/seamless-scroll.vue'

const settingStore = useSettingStore()
const { defaultOption, indexConfig } = storeToRefs(settingStore)

const state = reactive({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 120,
    limitScrollNum: 3
  },
  scroll: true
})

const getData = () => {
  // 使用固定模拟数据
  state.list = [
    { alertdetail: '水浸告警', alertname: '水浸告警', alertvalue: 125.67, createtime: '2022-04-19 08:38:33', deviceid: null, gatewayno: 10000, phase: 'A1', sbInfo: '设备运行状态正常', terminalno: 100, provinceName: '广东省', cityName: '深圳市', countyName: '南山区' },
    { alertdetail: '温度过高', alertname: '各种报警', alertvalue: 187.23, createtime: '2022-04-19 09:15:22', deviceid: null, gatewayno: 10001, phase: 'A1', sbInfo: '设备需要维护', terminalno: 101, provinceName: '浙江省', cityName: '杭州市', countyName: '西湖区' },
    { alertdetail: '压力异常', alertname: '水浸告警', alertvalue: 93.45, createtime: '2022-04-19 10:22:18', deviceid: null, gatewayno: 10002, phase: 'A1', sbInfo: '设备运行良好', terminalno: 102, provinceName: '江苏省', cityName: '南京市', countyName: '玄武区' },
    { alertdetail: '电压不稳', alertname: '各种报警', alertvalue: 156.89, createtime: '2022-04-19 11:05:45', deviceid: null, gatewayno: 10003, phase: 'A1', sbInfo: '设备待检修', terminalno: 103, provinceName: '上海市', cityName: '浦东新区', countyName: '' },
    { alertdetail: '湿度告警', alertname: '水浸告警', alertvalue: 78.12, createtime: '2022-04-19 12:30:56', deviceid: null, gatewayno: 10004, phase: 'A1', sbInfo: '设备状态良好', terminalno: 104, provinceName: '北京市', cityName: '海淀区', countyName: '' },
    { alertdetail: '震动异常', alertname: '各种报警', alertvalue: 142.67, createtime: '2022-04-19 13:18:33', deviceid: null, gatewayno: 10005, phase: 'A1', sbInfo: '设备需要关注', terminalno: 105, provinceName: '四川省', cityName: '成都市', countyName: '锦江区' },
    { alertdetail: '功率过载', alertname: '水浸告警', alertvalue: 198.45, createtime: '2022-04-19 14:42:15', deviceid: null, gatewayno: 10006, phase: 'A1', sbInfo: '设备运行中', terminalno: 106, provinceName: '湖北省', cityName: '武汉市', countyName: '武昌区' },
    { alertdetail: '流量告警', alertname: '各种报警', alertvalue: 67.89, createtime: '2022-04-19 15:55:28', deviceid: null, gatewayno: 10007, phase: 'A1', sbInfo: '设备正常运转', terminalno: 107, provinceName: '福建省', cityName: '厦门市', countyName: '思明区' },
    { alertdetail: '连接中断', alertname: '水浸告警', alertvalue: 134.56, createtime: '2022-04-19 16:20:42', deviceid: null, gatewayno: 10008, phase: 'A1', sbInfo: '设备需要检查', terminalno: 108, provinceName: '山东省', cityName: '青岛市', countyName: '市南区' },
    { alertdetail: '信号弱', alertname: '各种报警', alertvalue: 89.23, createtime: '2022-04-19 17:08:19', deviceid: null, gatewayno: 10009, phase: 'A1', sbInfo: '设备待维修', terminalno: 109, provinceName: '河南省', cityName: '郑州市', countyName: '金水区' },
    { alertdetail: '数据异常', alertname: '水浸告警', alertvalue: 176.45, createtime: '2022-04-19 18:33:51', deviceid: null, gatewayno: 10010, phase: 'A1', sbInfo: '设备运行稳定', terminalno: 110, provinceName: '湖南省', cityName: '长沙市', countyName: '岳麓区' },
    { alertdetail: '系统故障', alertname: '各种报警', alertvalue: 112.78, createtime: '2022-04-19 19:15:37', deviceid: null, gatewayno: 10011, phase: 'A1', sbInfo: '设备状态正常', terminalno: 111, provinceName: '安徽省', cityName: '合肥市', countyName: '蜀山区' },
    { alertdetail: '过热保护', alertname: '水浸告警', alertvalue: 165.34, createtime: '2022-04-19 20:42:26', deviceid: null, gatewayno: 10012, phase: 'A1', sbInfo: '设备需要冷却', terminalno: 112, provinceName: '江西省', cityName: '南昌市', countyName: '东湖区' },
    { alertdetail: '通信失败', alertname: '各种报警', alertvalue: 98.67, createtime: '2022-04-19 21:28:14', deviceid: null, gatewayno: 10013, phase: 'A1', sbInfo: '设备连接异常', terminalno: 113, provinceName: '重庆市', cityName: '渝北区', countyName: '' },
    { alertdetail: '负载过高', alertname: '水浸告警', alertvalue: 187.92, createtime: '2022-04-19 22:05:48', deviceid: null, gatewayno: 10014, phase: 'A1', sbInfo: '设备满负荷运行', terminalno: 114, provinceName: '陕西省', cityName: '西安市', countyName: '雁塔区' },
    { alertdetail: '环境告警', alertname: '各种报警', alertvalue: 73.56, createtime: '2022-04-19 23:17:32', deviceid: null, gatewayno: 10015, phase: 'A1', sbInfo: '设备环境良好', terminalno: 115, provinceName: '辽宁省', cityName: '沈阳市', countyName: '和平区' },
    { alertdetail: '电流异常', alertname: '水浸告警', alertvalue: 145.23, createtime: '2022-04-20 00:35:17', deviceid: null, gatewayno: 10016, phase: 'A1', sbInfo: '设备电流稳定', terminalno: 116, provinceName: '云南省', cityName: '昆明市', countyName: '五华区' },
    { alertdetail: '频率偏移', alertname: '各种报警', alertvalue: 119.78, createtime: '2022-04-20 01:52:43', deviceid: null, gatewayno: 10017, phase: 'A1', sbInfo: '设备频率正常', terminalno: 117, provinceName: '贵州省', cityName: '贵阳市', countyName: '云岩区' },
    { alertdetail: '相位错误', alertname: '水浸告警', alertvalue: 162.45, createtime: '2022-04-20 02:18:29', deviceid: null, gatewayno: 10018, phase: 'A1', sbInfo: '设备相位调整', terminalno: 118, provinceName: '黑龙江省', cityName: '哈尔滨市', countyName: '南岗区' },
    { alertdetail: '谐波超标', alertname: '各种报警', alertvalue: 91.34, createtime: '2022-04-20 03:45:55', deviceid: null, gatewayno: 10019, phase: 'A1', sbInfo: '设备谐波正常', terminalno: 119, provinceName: '吉林省', cityName: '长春市', countyName: '朝阳区' }
  ]
}

const montionFilter = (val) => {
  return val ? Number(val).toFixed(2) : '--'
}

const handleAddress = (item) => {
  let address = item.provinceName
  if (item.cityName) {
    address += '/' + item.cityName
  }
  if (item.countyName) {
    address += '/' + item.countyName
  }
  return address
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.right_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.right_bottom {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
      color: #31abe3;
      font-weight: bold;
      font-size: 16px;
    }

    .inner_right {
      position: relative;
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.8;

      .dibu {
        position: absolute;
        height: 2px;
        width: 104%;
        background-image: url('/static/img/zuo_xuxian.png');
        bottom: -12px;
        left: -2%;
        background-size: cover;
      }

      .flex {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 4px;
      }
    }

    .info {
      margin-right: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 4px;

      .labels {
        flex-shrink: 0;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }

      .zhuyao {
        color: #1890ff;
        font-size: 15px;
        font-weight: 900;
      }

      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }

      .warning {
        color: #e6a23c;
        font-size: 15px;
      }

      .time-text {
        font-size: 12px;
      }

      .address-text {
        font-size: 12px;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .time {
      flex-shrink: 0;
    }
  }
}
</style>

